<template>
	<view class="my">
		<!-- 未登录状态 -->
		<view class="not-login" v-if="!userInfo">
			<image class="avatar" src="/static/default-avatar.png" mode="aspectFill" />
			<view class="login-btn" @click="goLogin">点击登录</view>
			<text class="tips">登录后体验更多功能</text>
		</view>

		<!-- 已登录状态 -->
		<view class="user-info" v-else>
			<image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
			<view class="info">
				<text class="nickname">{{userInfo.nickname}}</text>
				<view class="follow-fans">
					<view class="follow-item" @click="goToFollowList">
						<text class="count">{{followCount}}</text>
						<text class="label">关注</text>
					</view>
					<view class="divider"></view>
					<view class="follow-item" @click="goToFansList">
						<text class="count">{{fansCount}}</text>
						<text class="label">粉丝</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-group">
				<view class="menu-item" @click="goToMyPets">
					<uni-icons type="heart" size="20" color="#666" />
					<text>我的宠物</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item" @click="goToLicenses">
					<uni-icons type="paperplane" size="20" color="#666" />
					<text>饲养许可</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item" @click="goToHealthRecords">
					<uni-icons type="star" size="20" color="#999" />
					<text>健康记录</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item" @click="goToCareGuide">
					<uni-icons type="help" size="20" color="#999" />
					<text>饲养指南</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="goToNotifications">
					<uni-icons type="notification" size="20" color="#666" />
					<text>消息通知</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item" @click="goToSettings">
					<uni-icons type="gear" size="20" color="#666" />
					<text>系统设置</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item" @click="goToFeedback">
					<uni-icons type="help" size="20" color="#666" />
					<text>意见反馈</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item" @click="goToAbout">
					<uni-icons type="info" size="20" color="#666" />
					<text>关于我们</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
			</view>

			<view class="menu-group" v-if="userInfo">
				<view class="menu-item logout" @click="handleLogout">
					<text>退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				followCount: 0,
				fansCount: 0,
				followList: [],
				fansList: []
			}
		},
		onShow() {
			// 每次显示页面时检查登录状态
			this.checkLoginStatus()
			// 优先读取本地缓存
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.userId) {
				const followCache = uni.getStorageSync('followCount_' + userInfo.userId)
				const fansCache = uni.getStorageSync('fansCount_' + userInfo.userId)
				this.followCount = typeof followCache === 'number' ? followCache : 0
				this.fansCount = typeof fansCache === 'number' ? fansCache : 0
			}
			// 异步刷新
			this.fetchFollowInfo('follow')
			this.fetchFollowInfo('fans')
		},
		methods: {
			// 检查登录状态
			checkLoginStatus() {
				const userInfo = uni.getStorageSync('userInfo')
				console.log('用户信息:', userInfo)
				if (userInfo) {
					this.userInfo = userInfo
				} else {
					this.userInfo = null
				}
			},
			// 跳转到登录页
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除用户信息
							uni.removeStorageSync('userInfo')
							this.userInfo = null
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
						}
					}
				})
			},
			// 页面跳转方法
			goToMyPets() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/my-pets/my-pets'
				})
			},
			goToLicenses() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/licenses/licenses'
				})
			},
			goToHealthRecords() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/health-records/health-records'
				})
			},
			goToCareGuide() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/care-guide/care-guide'
				})
			},
			goToNotifications() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/notifications/notifications'
				})
			},
			goToSettings() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/settings/settings'
				})
			},
			goToFeedback() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			},
			goToAbout() {
				uni.navigateTo({
					url: '/pages/about/about'
				})
			},
			goToFollowList() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/user-list/user-list?type=follow'
				})
			},
			goToFansList() {
				if (!this.userInfo) {
					this.goLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/user-list/user-list?type=fans'
				})
			},
			async fetchFollowInfo(type = 'follow') {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.userId) return

				const userObj = uniCloud.importObject('user')
				const res = await userObj.getUserProfileWithFollowInfo({
					userId: userInfo.userId,
					type, // 'follow' 或 'fans'
					page: 1,
					pageSize: 20
				})
				if (res.code === 200) {
					if (type === 'follow') {
						this.followCount = res.data.total
						this.followList = res.data.list
					} else {
						this.fansCount = res.data.total
						this.fansList = res.data.list
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.my {
		//min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: env(safe-area-inset-bottom);

		.not-login {
			background: #fff;
			padding: 60rpx 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 80rpx;
				margin-bottom: 30rpx;
			}

			.login-btn {
				width: 240rpx;
				height: 80rpx;
				background: #5cb85c;
				color: #fff;
				font-size: 32rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}

			.tips {
				font-size: 24rpx;
				color: #999;
			}
		}

		.user-info {
			background: #fff;
			padding: 40rpx;
			display: flex;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 30rpx;
			}

			.info {
				.nickname {
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 8rpx;
					display: block;
				}

				.phone {
					font-size: 28rpx;
					color: #999;
				}

				.follow-fans {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.follow-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 0 20rpx;
						cursor: pointer;

						.count {
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
						}
						.label {
							font-size: 24rpx;
							color: #999;
						}
					}
					.divider {
						width: 2rpx;
						height: 30rpx;
						background: #eee;
					}
				}
			}
		}

		.menu-list {
			margin-top: 20rpx;

			.menu-group {
				background: #fff;
				margin-top: 20rpx;
				border-radius: 20rpx;

				.menu-item {
					height: 100rpx;
					padding: 0 40rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					text {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}

					&.logout {
						justify-content: center;

						text {
							flex: none;
							margin-left: 0;
							color: #ff4d4f;
						}
					}
				}
			}
		}
	}
</style>